<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="act">
                <el-input disabled v-model="ruleForm.act"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址" prop="addr">
                <el-select v-model="ruleForm.addr" placeholder="请选择省份">
                    <el-option label="河北省" value="河北省"></el-option>
                    <el-option label="山西省" value="山西省"></el-option>
                    <el-option label="辽宁省" value="辽宁省"></el-option>
                    <el-option label="吉林省" value="吉林省"></el-option>
                    <el-option label="黑龙江省" value="黑龙江省"></el-option>
                    <el-option label="江苏省" value="江苏省"></el-option>
                    <el-option label="浙江省" value="浙江省"></el-option>
                    <el-option label="安徽省" value="安徽省"></el-option>
                    <el-option label="福建省" value="福建省"></el-option>
                    <el-option label="江西省" value="江西省"></el-option>
                    <el-option label="山东省" value="山东省"></el-option>
                    <el-option label="河南省" value="河南省"></el-option>
                    <el-option label="湖北省" value="湖北省"></el-option>
                    <el-option label="湖南省" value="湖南省"></el-option>
                    <el-option label="广东省" value="广东省"></el-option>
                    <el-option label="海南省" value="海南省"></el-option>
                    <el-option label="四川省" value="四川省"></el-option>
                    <el-option label="贵州省" value="贵州省"></el-option>
                    <el-option label="云南省" value="云南省"></el-option>
                    <el-option label="陕西省" value="陕西省"></el-option>
                    <el-option label="甘肃省" value="甘肃省"></el-option>
                    <el-option label="青海省" value="青海省"></el-option>
                    <el-option label="台湾省" value="台湾省"></el-option>
                    <el-option label="内蒙古自治区" value="内蒙古自治区"></el-option>
                    <el-option label="广西壮族自治区" value="广西壮族自治区"></el-option>
                    <el-option label="西藏自治区" value="西藏自治区"></el-option>
                    <el-option label="宁夏回族自治区" value="宁夏回族自治区"></el-option>
                    <el-option label="新疆维吾尔自治区" value="新疆维吾尔自治区"></el-option>
                    <el-option label="北京市" value="北京市"></el-option>
                    <el-option label="天津市" value="天津市"></el-option>
                    <el-option label="上海市" value="上海市"></el-option>
                    <el-option label="重庆市" value="重庆市"></el-option>
                    <el-option label="香港特别行政区" value="香港特别行政区"></el-option>
                    <el-option label="澳门特别行政区" value="澳门特别行政区"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注册时间" prop="regdate">
                <el-input disabled v-model="ruleForm.regdate"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" required>
                <el-col :span="11">
                <el-form-item prop="date">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
                </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button type="danger" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name:'EditUserList',
    props:['id','ts'],
    data() {
        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          act:'',
          name: '',
          pass: '',
          checkPass: '',
          region: '',
          addr:'',
          date: '',
          regdate:''
        },
        rules: {
          act: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          pass: [
            { required: true,validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            {required: true, validator: validatePass2, trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          addr: [
            { required: true, message: '请选择省份', trigger: 'change' }
          ],
          date: [
            { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
          ],
          regdate: [
            { required: true, message: '注册时间', trigger: 'blur' },
          ],
        }
      };
    },
    watch:{
        ts:{
            immediate:true, //初始化时让handler调用一下
            handler(){
                this.fresh()
            }
        }
    },
    methods: {
      fresh(){
        request.get('/api/page/settings/admin/user/searchbyid.do',{
        params:{
          id:this.id
        }
      }).then(res=>{
          this.ruleForm.act=res.act,
          this.ruleForm.name=res.name,
          this.ruleForm.pass=res.pwd,
          this.ruleForm.checkPass=res.pwd,
          this.ruleForm.region=res.sex,
          this.ruleForm.addr=res.addr,
          this.ruleForm.date=res.birth,
          this.ruleForm.regdate=res.regdate
      })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 发送请求
            this.save()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('onClose')
      },
      save(){
        request.post('/api/page/settings/admin/user/update.do',{
            id:this.id,
            act:this.ruleForm.act,
            name:this.ruleForm.name,
            pwd:this.ruleForm.pass,
            sex:this.ruleForm.region,
            addr:this.ruleForm.addr,
            birth:this.ruleForm.date,
            regdate:this.ruleForm.regdate
        }).then(res=>{
            if(res.code==="1"){
                this.$notify.success('修改成功')
                this.$emit('load')
                this.$emit('onConfirm')
            }else{
                this.$notify.error(res.message)
            }
        })
      }
    }
}
</script>

<style>

</style>